<template lang="html">
  <v-content style="height: 100%;" class="primary">
    <v-container fluid fill-height>
      <v-layout align-center justify-center>
        <v-flex xs12 class="white">
          <v-container style="position: relative;top: 13%;" class="text-xs-center">
            <v-card flat>
              <v-card-title primary-title>
                <h1>智慧市政巡检端</h1>
              </v-card-title>
              <v-form>
              <v-text-field prepend-icon="fa-user" v-model="username" name="Username" label="用户名"></v-text-field>
              <v-text-field prepend-icon="fa-lock" v-model="password" name="Password" label="密码" type="password"></v-text-field>
              <v-card-actions>
                <v-btn primary large block @click="login">登录</v-btn>
              </v-card-actions>
              </v-form>
            </v-card>
          </v-container>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</template>

<script>
// import {invoke} from "@/api"
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      password: "",
      username: "",
      // password: "hdd@123",
      // username: "administrator",
      isLogining: false,
      remember: true
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    this.autoLogin()
  },
  methods: {
    autoLogin () {
      const self = this
      // if (Number(plus.networkinfo.getCurrentType()) !== 1) { // eslint-disable-line
      self.remember = localStorage.getItem('remember')
      let loginName = localStorage.getItem('loginName')
      let password = localStorage.getItem('password')
      if (localStorage.getItem('autologin') === 'true') {
        self.$store.dispatch('login', { loginName: loginName, password: password }).then((res) => {
          this.$router.replace({
            path: "/homepage"
          })
        })
      }
      // } else {
      //   self.$toast.center('无法连接,请检查您的网络!')
      // }
    },
    login() {
      const self = this
      // if (true) { // eslint-disable-line
      // if (Number(plus.networkinfo.getCurrentType()) !== 1) { // eslint-disable-line
        if (!self.isLogining) {
          if (_.isEmpty(String(self.username))) {
            self.$toast.center('用户名不能为空!')
          } else if (_.isEmpty(String(self.password))) {
            self.$toast.center('密码不能为空!')
          } else {
            self.isLogining = true
            setTimeout(() => {
              self.$store.dispatch('login', { loginName: self.username, password: self.password }).then((res) => {
                if (self.remember) {
                  localStorage.setItem('loginName', self.username)
                  localStorage.setItem('password', self.password)
                  localStorage.setItem('remember', 'true')
                  localStorage.setItem('autologin', 'true')
                }
                this.$router.replace({
                  path: "/homepage"
                })
                self.isLogining = false
              }).catch(err => {
                if (err.msg) {
                  self.$toast.center(err.msg)
                  console.log(err.msg)
                } else {
                  self.$toast.center('您输入的密码错误，或该用户不存在。')
                  console.error(err)
                }
                self.isLogining = false
              })
            }, 500)
          }
        }
      // } else {
      //   self.$toast.center('无法连接,请检查您的网络!')
      // }
    }
  },
  watch: {
    remember (val) {
      localStorage.setItem('remember', String(val))
    }
  }
}
</script>

<style lang="css">
</style>
